// 创建路由器
import VueRouter from "vue-router";

// pages目录下存放的是路由组件
// components目录下存放的是一般组件
import About from "../pages/About";
import Home from "../pages/Home";
import Message from "../pages/Message";
import News from "../pages/News";
import Detail from "../pages/Detail";

const router = new VueRouter({
  // 注意此处是routes,不是routers
  routes: [
    // 一级路由
    {
      name: "guanyu", // 命名路由
      path: "/about",
      component: About,
      meta: { title: "关于" },
    },
    {
      name: "zhuye",
      path: "/home",
      component: Home,
      meta: { title: "主页" },
      children: [
        // 通过children 配置子级路由
        {
          name: "xiaoxi",
          path: "message", // 二级路由，path 路径名最前面不需要加反斜杠
          component: Message,
          meta: { title: "消息", isAuth: true }, // vue 提供的存放自定义配置的容器
          children: [
            {
              name: "xiangqing", // params路由
              // path: "detail/:id/:title", // :后跟占位符的名称决定了$route.params下一级的名称，eg: :id =>  $route.params.id
              path: "detail",
              component: Detail,
              meta: { title: "详情", isAuth: true }, // vue 提供的存放自定义配置的容器

              //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detailx 组件
              // props: { a: 1, b: "hello" },

              //props 的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail 组件.
              // 该种方法只能应用在params参数为主的路由上
              // props: true,

              // props 的第三种写法，值为函数
              props($route) {
                // 也可以使用解构赋值的写法 {query}
                // return { id: query.id, title: query.title };
                return { id: $route.query.id, title: $route.query.title };
              },
            },
          ],
        },
        {
          name: "xinwen",
          path: "news", // 二级路由，path 路径名最前面不需要加反斜杠
          component: News,
          meta: { title: "新闻", isAuth: true }, // vue 提供的存放自定义配置的容器,应该在需要配置的路由上配置该属性
          // 独享路由
          beforeEnter: (to, from, next) => {
            //
            console.log("独享路由", to, from, next);
            if (to.meta.isAuth) {
              if (localStorage.getItem("school") === "qinghua") {
                next();
              } else {
                alert("无权限查看！");
              }
            } else {
              next();
            }
          },
        },
      ],
    },
  ],
});

// 全局前置路由守卫----- 初始化时被调用，每次路由切换之前被调用
// router.beforeEach((to, from, next) => {
//   console.log("前置路由守卫", to, from);
//   // if (to.name == "xinwen" || to.path === "/home/message") {
//   //判断是否需要鉴权
//   if (to.meta.isAuth) {
//     if (localStorage.getItem("school") === "qinghua") {
//       next();
//     } else {
//       alert("无权限查看！");
//     }
//   } else {
//     next();
//   }
// });

// 全局后置路由守卫
router.afterEach((to, from) => {
  console.log("后置路由守卫", to, from);
  document.title = to.meta.title || "Vue网站";
});

export default router;
